<template>
  <div>
    <div class="topgoods">
      <p class="goodnum">已上架活动数 (当前) : {{goodNum}}</p>
      <el-input placeholder="输入商品名称搜索"
        v-model="title"
        clearable
        size='small'
        class="goodsname">
        <i slot="suffix"
          class="el-input__icon el-icon-search"
          @click="searchGoods"></i>
      </el-input>
      <el-input placeholder="输入商品id搜索"
        v-model="id"
        clearable
        size='small'
        class="goodsname">
        <i slot="suffix"
          class="el-input__icon el-icon-search"
          @click="searchGoods"></i>
      </el-input>
    </div>
    <div class="record_line"></div>

    <el-table :data="tableData"
      style="width:100%"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor">

      <el-table-column prop="title"
        label="活动名称"
        width="160"></el-table-column>
      <el-table-column prop="product_id"
        label="商品id"></el-table-column>

      <el-table-column label='商品售价'>
        <template slot-scope="scope">
          <p>¥{{scope.row.price}}</p>
        </template>
      </el-table-column>

      <el-table-column label='活动价'>
        <template slot-scope="scope">
          <p>¥{{scope.row.sale_price}}</p>
        </template>
      </el-table-column>
     
      <el-table-column label='冻结库存数' prop='stock' width='100'></el-table-column>
     
      <el-table-column label='已售/核销数量'
        width='140'>
        <template slot-scope="scope">
          <p>{{scope.row.sale_count}}/{{scope.row.verify_count}}</p>
        </template>
      </el-table-column>
      <el-table-column label='状态'
        width='120'>
        <template slot-scope="scope">
          <!-- <el-switch :key="scope.row.id"
            :active-value="1"
            :inactive-value="0"
            :value="scope.row.status"
            @change="isUseActivityChange(scope.row.id,$event)"></el-switch> -->
          <p >{{scope.row.status_word}}</p>
          <!-- <p  v-if="scope.row.status == '2'"
            >已下架</p>
            <p  v-if="scope.row.status == '3'"
            >已售罄</p> -->
        </template>
      </el-table-column>
      <el-table-column prop="created_at"
        label="上架时间"
        width="240"></el-table-column>
    </el-table>
<!-- 
   @size-change="handleSizeChange" -->
    <el-col :span="24">
      <div class="pagination">
        
        <el-pagination background
          @current-change="pageChange"
          :current-page="page"
          :page-size="20"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
import {shopActivitySearchData} from '@/api/shopdetail';
export default {
  props:['shopId'],
   mounted (){
     this.getshopActivitySearchData(this.shopId)
  }, 
  watch: {
      shopId(newValue){
        if(newValue){
          this.getshopActivitySearchData(this.shopId)
        }
      }
  },
  data () {
    return {
      goodNum:0,
      title: '',
      id:'',
      page:1,
      total:0,
      tableData: [],
    }
  },
  methods: {
    async getshopActivitySearchData(shopId){
      var url = 'page='+this.page+
                '&id='+this.id + 
                '&title='+this.title
      let res = await shopActivitySearchData(shopId,url)
       this.goodNum = res.data.on_sale_count
      this.tableData = res.data.list.data
      this.total = res.data.list.total
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },

    isUseActivityChange (id, e) {
      //更新成功后重新获取商品
      // this.getshoptypeopenorclose(id, e);
      console.log('id:' + id + ',e:' + e)
    },
    searchGoods () {
      this.page = 1
      this.getshopActivitySearchData(this.shopId)
    },
      pageChange(page) {
      this.page = page;
      this.getshopActivitySearchData(this.shopId)
    },
  }
}
</script>

<style lang="scss" scoped>
.topgoods {
  height: 30px;
  .goodnum {
    float: left;
    width: 200px;
  }
  .goodsname {
    float: right;
    width: 200px;
    margin-top: -5px;
  }
}
.record_line {
  margin: 10px 0;
  height: 1px;
  background-color: #e6e6e6;
}
.doing {
  color: blue;
}

.success {
  color: green;
}
.failure {
  color: red;
}
.operate_info {
  float: left;
}
.status—desc {
  float: right;
}
.pagination {
  float: right;
  margin-top: 15px;
}
</style>